\begin{frame}{Gosunoid}
  \begin{columns}
    \column{0.8\textwidth}
    \includegraphics[width=\textwidth]{img/ventana_gosunoid.png}

    \column{0.2\textwidth}

    \begin{center}
      Es un clon del clásico \textbf{Arkanoid}, que a su vez fue un clon del
      juego \textbf{Breakout} de Atari.

      \hspace{0cm}

      La idea es acabar con todos los bloques.
    \end{center}
  \end{columns}
\end{frame}

\begin{frame}{Recursos que utilizaremos}
  \begin{figure}[c]
    \centering
    \includegraphics{img/pala.png}
    \caption{\texttt{media/pala.png} - Pala que controla el jugador}
  \end{figure}
  
  \begin{figure}[c]
    \centering
    \includegraphics{img/bola.png}
    \caption{\texttt{media/bola.png} - Bola}
  \end{figure}
\end{frame}

\begin{frame}{Recursos que utilizaremos}
  \begin{figure}[c]
    \centering
    \includegraphics{img/bloque.png} 
    \caption{\texttt{media/bloque.png}}   
  \end{figure}
\vspace{-0.3cm}
  Utilizaremos una misma imagen para pintar todos los bloques, ya que el método
  \texttt{draw} de la clase \texttt{Gosu::Window} nos permite indicar un color
  con el que tintar el bloque.

  \begin{figure}[c]
    \centering
    \includegraphics{img/bloques.png}
  \end{figure}
\end{frame}

\begin{frame}{Recursos que utilizaremos}
  \begin{figure}[c]
    \centering
    \includegraphics{img/textodigital.png}
    \caption{\texttt{media/fuentelcd.ttf} - Fuente tipo LCD}
  \end{figure}
\end{frame}

\begin{frame}{Organización del proyecto}
  \begin{block}{En Linux}
    \begin{itemize}
    \item \textbf{Carpeta include} \\Ficheros de cabecera (.h)
    \item \textbf{Carpeta src} \\Ficheros de código fuente: \texttt{main.cpp} y \texttt{ventana.cpp}
    \item \textbf{Carpeta obj} \\Ficheros temporales.
    \item \textbf{Carpeta media} \\Recursos (imágenes y tipos de letra .ttf).
    \item \textbf{Makefile} \\Script para compilar, solo hace falta escribir \texttt{make}.
    \end{itemize}    
  \end{block}

\end{frame}

\begin{frame}{Organización del proyecto}
  \begin{block}{En Windows}
    \begin{itemize}
    \item \textbf{Carpeta include} \\Ficheros de cabecera (.h)
    \item \textbf{Carpeta src} \\Ficheros de código fuente: \texttt{main.cpp} y \texttt{ventana.cpp}
    \item \textbf{Carpeta ArchivosTemporales} \\Ficheros de código objeto.
    \item \textbf{Carpeta Ejecutable} \\Aquí se genera el .exe
    \item \textbf{Parte 2.vcproj} \\Fichero del proyecto
    \end{itemize}    
  \end{block}  
\end{frame}

\begin{frame}[fragile]
  \begin{center}
    {\Large Trabajaremos con el fichero \texttt{src/ventana.cpp}.}

    \hspace{1cm}

    Como tenemos poco tiempo, trabajaremos con el proyecto ya comenzado en lugar
    de empezar de cero. 

    \hspace{0cm}

    Iremos rellenando las partes que faltan hasta que funcione por completo. Las
    partes que faltan por rellenar están marcadas con la siguiente línea:

\begin{verbatim}
// @@RELLENAME@@
\end{verbatim}

    El código completo lo encontraréis en \\ \texttt{soluciones/Parte 2/ventana.cpp}
  \end{center}
\end{frame}

\begin{frame}{Overview del proyecto}
  \begin{itemize}
  \item La clase principal es \texttt{Ventana}, que deriva de
    \texttt{Gosu::Window}.

  \item Tiene los métodos típicos que hemos comentado antes:
    \begin{itemize}
    \item \texttt{update()}
    \item \texttt{draw()}
    \item \texttt{buttonDown()}
    \end{itemize}

  \item Tiene los siguientes elementos gráficos:
    \begin{itemize}
    \item Imagen para la pala, la bola, y el fondo.
    \item Imagen genérica para los bloques.
    \item Fuente para el marcador de puntos.
    \end{itemize}

  \item El enumerado \texttt{tipoEstado} indica los dos posibles estados del
    juego:
    \begin{itemize}
    \item \texttt{ESTADO\_INICIAL}, cuando la bola está sobre la pala.
    \item \texttt{ESTADO\_MOVIMIENTO}, cuando la bola está en movimiento.
    \item El estado se guarda en la variable \texttt{estadoActual}.
    \end{itemize}

  \end{itemize}  
\end{frame}

\begin{frame}{Estado inicial}
  \begin{columns}
    \column{0.8\textwidth}
    \includegraphics[width=\textwidth]{img/ventana_broken.png}

    \column{0.2\textwidth}

    \begin{center}
      Parece que faltan unas cuantas cosas para que esto salga adelante...
    \end{center}
  \end{columns}
\end{frame}

\begin{frame}[fragile]{Problema 1: ¿qué pasa con el fondo?}
  Parece que el fondo no se está pintando, habrá que ver qué pasa en el método
  \texttt{draw} de nuestra clase \texttt{Ventana}...

  \hspace{1cm}

  Escribe el código necesario para que se pinte el fondo en las coordenadas
  (0,0,0)
  
\end{frame}

\begin{frame}{Problema 2: bloques de... ¿colores?}
  Los bloques parece que están de luto. Se dibujan en pantalla, sí, pero parece
  que no con el color adecuado. 

  \hspace{1cm}

  Fíjate en el método \texttt{draw} de la clase \texttt{Ventana}, hay una
  variable \texttt{bloqueColor} que guarda el color asociado al bloque, pero no
  parece que se utilice luego en ningún lado.

  \hspace{1cm}

  Modifica el código que pinta los bloques para que acepte el atributo de color
  \texttt{bloqueColor}
\end{frame}

\begin{frame}{Problema 3: ¡quiero ver mis puntos!}
  No hay nada más triste que un marcador de puntos sin puntos. Parece que se nos
  ha olvidado cargar la fuente para mostrar el marcador.

  \hspace{1cm}

  En el constructor de la clase \texttt{Ventana}, añade el código necesario para
  cargar en el atributo \texttt{fuente} una nueva \texttt{Gosu::Font} que cargue
  el archivo \texttt{"media/fuentelcd.ttf"} a un tamaño de 33 píxeles y sin
  negritas.  
\end{frame}

\begin{frame}{Problema 4: ¡la pala no se mueve!}
  Aunque aparentemente todo pinta bien, la pala no sigue al ratón al moverse,
  siempre se queda fija en la misma posición. Esto no pinta nada bien!

  \hspace{1cm}

  Tal vez puedas conseguir leer la posición horizontal del ratón y asignársela a
  la variable \texttt{mouseX} dentro del método \texttt{update} de \texttt{Ventana}.
\end{frame}

\begin{frame}
  \begin{center}
    {\LARGE ¡Esto ha sido todo, hamijos!

    \hspace{1cm}

    \includegraphics[width=0.4\textwidth]{img/buddy-jesus.jpg}

    \hspace{1cm}

    Gracias por venir :)}
  \end{center}  
\end{frame}